<template>
  <mu-flex id="root" direction="column">
    <mu-appbar id="appBar" :z-depth="2" color="primary" title="自助挂号"></mu-appbar>

    <mu-flex id="content" direction="column">
      <mu-select label="选择省市" v-model="provinceIndex" full-width :ripple="true" label-float>
        <mu-option
                v-for="(value, index) in provinces"
                :key="index"
                :label="value"
                :value="index"></mu-option>
      </mu-select>
      <mu-select label="选择市区" v-model="cityIndex" full-width :ripple="true" label-float>
        <mu-option
                v-for="(value, index) in cities"
                :key="index"
                :label="value"
                :value="index"></mu-option>
      </mu-select>
      <mu-select label="选择区镇" v-model="regionIndex" full-width :ripple="true" label-float>
        <mu-option
                v-for="(value, index) in regions"
                :key="index"
                :label="value"
                :value="index"></mu-option>
      </mu-select>
    </mu-flex>
  </mu-flex>
</template>

<script lang="ts">
  import districts from '@/phr/common/districts';

  export default {
    data() {
      return {
        provinces: districts[100000],
        cities: undefined,
        regions: undefined,
        provinceIndex: undefined,
        cityIndex: undefined,
        regionIndex: undefined,
      }
    },
    watch: {
      provinceIndex(value) {
        this.cities = districts[value];
        this.cityIndex = undefined;
        this.regionIndex = undefined;
      },
      cityIndex(value) {
        this.regions = districts[value];
      },
    },
    methods: {

    }
  }
</script>

<style scoped>
  #root {
    width: 100%;
    height: 100%;
    position: absolute;
  }

  #appBar {
    width: 100%;
    flex-shrink: 0;
  }

  #content {
    width: 100%;
    flex: 1 1 0;
    padding: 8px 16px;
  }
</style>